<template>
  <div class="main">
      <h1>Web 即时打印</h1>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="打印文件" name="Print">
          <router-view/>
        </el-tab-pane>
        <el-tab-pane label="打印记录" name="History">
          <router-view/>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      activeName: 'Print'
    }
  },
  methods: {
    handleClick (tab, event) {
      // 防止重复跳转
      if (tab.$options.propsData.name === 'Print' && this.$route.path !== '/Print') {
        this.$router.push(tab.$options.propsData.name)
      } else if (tab.$options.propsData.name === 'History' && this.$route.path !== '/History') {
        this.$router.push(tab.$options.propsData.name)
      }
    },
    onSubmit () {
      console.log('submit!')
    }
  },
  mounted () {
    console.log('mounted : home')
    // 加载 Print 子组件
    if (this.$route.path !== '/Print') {
      this.$router.push('Print')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  padding-left: 40px;
  padding-right: 40px;
}
</style>
